<template>
	<view class="selectContainer">
		<view class="header">
			
			<Search color='#f03a58'></Search>
			<view class='selectBox'>
				<view class="box">
					<text class='boxText'>分类选型</text>
					<text class="bar" v-show="true"></text>
				</view>
				<view class="box">
					<text class='boxText'>品牌选型</text>
					<text class='bar' v-show="false"></text>
				</view>
			</view>
		</view>
		<view class="classSelect">
			<!-- 左边列表 -->
			<view class="selectL">
			<scroll-view class="LScroll" scroll-y="true" enable-flex show-scrollbar="false">
				<view 
				class='LItem' 
				:class="{active:showId === item.id}"
				v-for="item in categoryList" 
				:key="item.id"
				@click="showId = item.id"
				>{{item.shortName}}</view>


			</scroll-view>
				
			</view>
			
			<!-- 右边列表 -->
			<view class="selectR">
				<scroll-view class="RScroll" scroll-y="true" enable-flex show-scrollbar="false">
					<view class="trademark" v-if="showList.brand.length > 0">
						<text class="tdTitle">推荐品牌</text>
						<view class="tdList">
							<view class="tdItem" v-for="brandItem in showList.brand" :key="brandItem.brandId">
								<view class="box">
								<image class="tdImg" :src="brandItem.logo" ></image>
								</view>
							</view>
												
					
						</view>
						
					</view>
					
					<view class="device" v-for="childItem in showList.childrens" :key="childItem.id">
						<view class="devHeader">
							<view class="headerTitle">
								{{childItem.name}}
							</view>
							<view class="headerMore">
								全部 >
							</view>
						</view>
						<view class="devList">
							<view class="devItem" v-for="title in childItem.childrens" :key="title.id">
								{{title.name}}
							</view>
			
						</view>
					</view>
					
					
				</scroll-view>
				
			</view>

		</view>
	</view>
	
</template>

<script>
import {mapState} from 'vuex'
	export default {
		name:'Select',
		data(){
			return {
			showId:1068,
			}
		},
		mounted(){
			uni.setNavigationBarColor({
				frontColor:"#ffffff",
				backgroundColor:"#f03a58",
			}),
			this.getCategoryList()
		},
		methods:{
			getCategoryList(){
				this.$store.dispatch('category/getCategoryList')
			}
		},
		computed:{
			...mapState('category',['categoryList']),
			showList(){
				return this.categoryList.find(item => item.id === this.showId)
			}
		}
	}
</script>

<style lang="stylus">
::-webkit-scrollbar
	display: none
.selectContainer
	position: relative
	height: 100%
	.header
		width: 100%
		position: fixed
		left: 0
		top: 0
		.selectBox
			height: 80upx
			display: flex
			background-color: #f03a58
			.box
				width: 50%
				font-size: 24upx
				text-align: center
				line-height: 80upx
				color white
				position: relative
				.bar
					position: absolute
					left: 50%
					bottom: 2upx
					transform: translate(-50%,-50%)
					width: 100upx;
					height: 6upx
					border-radius: 4upx
					background-color: white
	.classSelect
		position: absolute
		top: 170upx
		left: 0
		width: 100%
		display: flex
		.selectL
			width: 25%
			.LScroll
				width: 100%
				height: calc(100vh - 170upx)
				.LItem
					height: 100upx
					text-align: center
					line-height: 100upx
					background-color: #f2f2f2
					color black
					font-size 28upx
					&.active
						background-color: white
						color: #f03a58
						border-left: 4upx solid #f03a58
		.selectR
			width: 75%
			.RScroll
				width 100%
				height: calc(100vh - 170upx)
				.trademark
					padding-top 20upx
					display: flex
					flex-direction: column
					.tdTitle
						height: 60upx
						font-size: 28upx
						color: #666
						line-height: 60upx
						padding-left: 20upx
					.tdList
						display: flex
						flex-wrap: wrap
						.tdItem
							width: 50%
							box-sizing: border-box
							padding: 0 35upx 30upx
							.box
								padding: 9upx 16upx
								background-color: #fafafa
								width 200upx
								height: 82upx
								box-sizing: border-box
								.tdImg
									width: 168upx
									height: 62upx
				.device
					display: flex
					flex-direction: column
					.devHeader
						width 100%
						display: flex
						justify-content: space-between
						.headerTitle
							font-size: 30upx
							height: 90upx
							line-height: 90upx
							padding-left 20upx
						.headerMore
							width: 90upx;
							height: 90upx
							line-height: 90upx
							font-size: 28upx
							margin-right 10upx
							color: #aaa
					.devList
						display: flex
						flex-wrap: wrap
						.devItem
							height: 60upx
							flex:1 1 50%
							text-align: center
							line-height: 60upx
							background-color: #f1f2f4
							color: #888888
							font-size: 24upx
							border-bottom: 1px solid #e6e6e6
							border-right: 1px solid #e6e6e6
							box-sizing: border-box
						
</style>